<template>
  <div class="section row items-start q-py-xs no-wrap">
    <q-icon class="q-mx-sm q-mt-xs" :name="icon" size="24px" :color="color"></q-icon>
    <div class="col col-grow" style="max-width: 90%">
      <div class="column">
        <slot name="title">
          <div>{{ title }}</div>
        </slot>
        <slot />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component({
  name: 'panel-section',
})
export default class PanelSection extends Vue {
  @Prop({ default: 'Title' }) readonly title!: string;
  @Prop({ default: 'mdi-account' }) readonly icon!: string;
  @Prop({ default: 'white' }) readonly color!: string;
}
</script>
<style lang="stylus" scoped>
.section {
  background-color: $background;
  border-radius: 2px;
  overflow: hidden;
}
</style>
